<template>
    <div class="aside-wrap">
      <el-menu background-color="#001529"
               text-color="#fff"
               active-text-color="#409EFF" @select="selectHandler" :default-active="$route.path">
        <template v-for="item in menu">
          <el-menu-item v-if="item.submenu == null" :index="item.index">
            <i v-if="item.icon == null" :class="defaultIcon"></i>
            <i v-if="item.icon != null" :class="item.icon"></i>
            <span slot="title">{{item.label}}</span>
          </el-menu-item>
          <el-submenu v-if="item.submenu != null" :index="item.index">
            <template slot="title">
              <i v-if="item.icon == null" :class="defaultIcon"></i>
              <i v-if="item.icon != null" :class="item.icon"></i>
              <span>{{item.label}}</span>
            </template>
            <el-menu-item v-for="subItem in item.submenu" :index="subItem.index">
              <i v-if="item.icon == null" :class="defaultIcon"></i>
              <i v-if="item.icon != null" :class="subItem.icon"></i>
              <span slot="title">{{subItem.label}}</span>
            </el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </div>
</template>
<script>
    export default {
        name: 'App',
        data () {
            return {
                menu : [
                    {
                      label:'机构用户',
                      icon:'iconfont  icon-houtaiyonghuguanli',
                      index:'organ',
                      submenu:[
                        {
                          label:'用户管理',
                          icon:'iconfont  icon-yonghuguanli',
                          index:'/organ/user'
                        },
                        {
                          label:'机构管理',
                          icon:'iconfont icon-jigouguanli',
                          index:'/organ/organ'
                        },
                        {
                          label:'区域管理',
                          index:'/organ/area',
                          icon:'iconfont icon-tiaoduguanli'

                        }
                      ]
                    },
                    {
                      label:'系统设置',
                      index:'system',
                      icon:'iconfont icon-xitongpeizhi',
                      submenu:[
                        {
                            label:'菜单管理',
                            index:'/system/menu',
                            icon:'el-icon-menu'
                        },
                        {
                            label:'角色管理',
                            index:'/system/role',
                            icon:'iconfont icon-jiaoseguanli'
                        },
                        {
                          label:'字典管理',
                          index:'/system/dict',
                          icon:'el-icon-document'

                        }
                      ]
                    },
                    {
                      label:'导航3',
                      index:'3'
                    },
                ],
                defaultIcon:'el-icon-setting'
            }
        },
      methods:{
        selectHandler (index,indexPath) {
          this.$router.push(index);
          this.$store.commit('addTabs',{name:this.$route.path,label:this.$route.name})
        }
      }
    }
</script>
<style scoped>
.el-menu {
  border-right: solid 1px #001529;

}
.iconfont {
  width: 24px;
  font-size: 24px;
  margin-right: 5px;
}
</style>
